<template>
  <div class="admin_details">
    <el-main>
      <el-row>
        <div class="centerDetail_box">
            <p class="centerDetail_box_p sz"><el-tag v-if="detailArr.tag"  effect="dark" size="small" style="margin-right:5px;" type="danger">{{detailArr.tag}}</el-tag>{{detailArr.title}}</p>
            <p class="contextSize">{{detailArr.ctime}} <span style="float: right;">浏览量：{{detailArr.click}}</span></p>
            <el-row class="martop">
              <el-col class="info_item" :lg="24">
                <p class="context" v-html="detailArr.content"></p>
              </el-col>
            </el-row>
               <div style="margin:20px 0;" v-for="(item,index) in detailArr.annex" :key="index">
                  <!-- <el-button  style="margin:20px 0;" type="primary"> <i class="el-icon-download"></i> 点击查看附件{{item.length > 0?index+1:""}}<i class="el-icon-arrow-right el-icon--right"></i></el-button> -->
          <a class="a_download s_flex s_justify_content s_align_items" :href="item.file  " target="_blank" rel="noopener noreferrer">
            <!-- 点击查看附件{{item.length > 0?index+1:""}} -->
            <div  class="s_flex s_justify_content s_align_items">
               <i class="iconfont icon-wenjian"></i>
              <span>{{item.name}}</span>
            </div>
            <div>
               <i class="iconfont icon-xiazai"></i>
            </div>
          </a>
        </div>
            <el-row >
              <el-col :lg="24">
                <el-tag
                  class="tagmr"
                  v-for="tag in detailArr.operate_key"
                  :key="tag.name"
                  closable
                  :type="tag.type">
                  {{tag.name}}
                </el-tag>
              </el-col>
              <el-col :lg="24" class="chat">
                <!-- <p style="font-size:16px;font-weight:400;color:rgba(62,74,102,1);padding: 30px 0;">留言区</p> -->
                <div style="display: flex;justify-content: space-between;align-items: center;">
                  <p style="font-size:16px;font-weight:400;color:rgba(62,74,102,1);padding: 30px 0;">留言区</p>
                  <el-button @click="checkoutItems" v-if="rid == 0" type="primary">删除</el-button>
                </div>
                <el-collapse @change='changeVal'  accordion>
                  <el-collapse-item   @click.native="chatAdd(index)" v-for="(item,index) in detailArr.company_list" :key="index"  :name="index">
                    <template slot="title">
                      <el-checkbox @click.native.stop ="deleteItems(item,$event)" v-model="item.check">
                      </el-checkbox>
                      <div class="head-chat" :class="['chat-item', true ? 'left' : 'right']">
                        <div class="user">
                          <img class="avatar" :src="item.thumb" />
                        </div>
                        <div class="meta">
                          <p class="hd">
                            <span class="name">{{item.company}}</span>
                            <span class="time">{{item.ctime}}</span>
                          </p>
                        </div>
                        <div class="content text">
                          <span>{{item.content}}</span>
                        </div>
                      </div>
                     <!-- <div class="head_user">
                        <img class="head_avatar" :src="item.thumb" />
                      </div>
                      <div class="head_meta">
                        <p class="hd">
                          <span class="head_name">{{item.company}}</span>
                          <span class="head_time">{{item.ctime}}</span>
                        </p>
                      </div>
                      <div class="content text">
                        <span>{{item.content}}</span>
                      </div> -->
                      <!-- <el-button  @click="chatAdd(index)" style="background-color: #45A321;width: 120px;color:#fff;border-radius: 0;position: absolute;right:30px;top:50%;transform: translateY(-50%);" >回复</el-button> -->
                    </template>
                    <!-- <div :class="['chat-item', content.type == '1' ? 'right' : 'left']" v-for="(content,index) in item.comment" :key="index">
                      <div class="user">
                        <img class="avatar" :src="content.thumb" />
                      </div>
                      <div class="meta">
                        <p class="hd">
                          <span class="name">{{content.name}}</span>
                          <span class="time">{{content.ctime}}</span>
                        </p>
                      </div>
                      <div class="content text">
                        <span>{{content.content}}</span>
                      </div>
                    </div> -->
                  </el-collapse-item>
                </el-collapse>
              </el-col>
            </el-row>
            <!-- <div class="addChat" >
              <el-input v-show="dialogVisible" placeholder="请输入你要回复的文字" v-model="chatVal">
                <el-button slot="append" style="background-color: #3478FF;color: #fff;width:100px;text-align: center;border-radius:0;" @click="chat" class="pubBtn3">发送</el-button>
              </el-input>
            </div> -->
        </div>
        </el-col>
      </el-row>
    </el-main>

    <el-dialog
    :destroy-on-close="true"
     :close-on-click-modal='false'
      title="留言区"
      :visible.sync="dialogVisible"
      width="40%"
      center
      >
      <el-button @click="checkoutItem" v-if="rid == 0" style="margin-bottom:20px;" type="primary">删除</el-button>
      <div style="background-color:#f7f9fc;padding:20px 0;" v-for="(item,index) in list" :key="index">
          <div class="head-chat" style="padding:12px 90px;" :class="['chat-item', item.type == 0 ? 'left' : 'right']">
            <div class="user" style="display: flex;align-items: center;justify-content: space-between;">
              <el-checkbox v-if="item.type == 0" @click.native ="deleteItem(item,$event)" v-model="item.check">
              </el-checkbox>
              <img class="avatar" :src="item.thumb" style="margin-left:10px;"/>
              <el-checkbox style="margin-left:10px;" v-if="item.type  == 1" @click.native ="deleteItem(item,$event)" v-model="item.check">
              </el-checkbox>
            </div>
            <div class="meta">
              <p class="hd">
                <span class="name">{{item.company}}</span>
                <span class="time">{{item.ctime}}</span>
              </p>
            </div>
            <div style="top:10px;" class="content text">
              <span>{{item.content}}</span>
            </div>
          </div>
      </div>
      <el-input v-if="rid == 0" style="margin-top:20px;" v-show="dialogVisible" placeholder="请输入你要回复的文字" v-model="chatVal">
        <el-button slot="append" style="background-color: #3478FF;color: #fff;width:100px;text-align: center;border-radius:0;" @click="chat" class="pubBtn3">发送</el-button>
      </el-input>
    </el-dialog>
<!--    <el-main style="margin-top:20px;">
      <el-row>
        <el-col :lg="15">
          <div class="details_head">
            <p class="Subhead">留言区</p>
          </div>
        </el-col>
      </el-row>
    </el-main> -->
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import {
  messageReply,
  messageDetail,
  messageDelete,
  messageInfo,
  messageDeletes,
  defaultCate,
} from "@/api/admin";
export default {
  data() {
    return {
      dialogVisible: false,
      chatVal: "",
      detailArr: [],
      operate_key: [],
      id: null,
      user_id: null,
      checkList: [],
      list: [],
      listMessage: [],
      listMessages: [],
      replyId: null,
    };
  },
  computed: {
    ...mapGetters([
      "sidebar",
      "avatar",
      "name",
      "roles",
      "type",
      "is_admin_view",
      "rid",
    ]),
  },
  mounted() {
    this.getDeta();
  },
  methods: {
    async getDeta() {
      try {
        this.id = this.$route.query.id;
        this.detailArr = await messageDetail({ message_id: this.id });
      } catch (e) {
        this.$message.error(e.message);
      }
    },
    async chat() {
      try {
        await messageReply({
          message_id: this.id,
          content: this.chatVal,
          user_id: this.user_id,
        });
        const res = await messageInfo({
          user_id: this.user_id,
          message_id: this.id,
        });
        this.list = res.comment;
        this.chatVal = "";
        this.getDeta();
      } catch (e) {
        this.$message.error(e.message);
      }
    },
    async chatAdd(index) {
      // this.replyId = this.detailArr[index].user_id
      try {
        this.user_id = this.detailArr.company_list[index].user_id;
        this.dialogVisible = true;
        const res = await messageInfo({
          user_id: this.user_id,
          message_id: this.id,
        });
        this.list = res.comment;
      } catch (e) {
        this.$message.error(e.message);
      }
    },
    changeVal(val) {
      if (!val) {
        // this.user_id = null;
      }
    },
    deleteItem(item, e) {
      if (e.target.tagName === "INPUT") {
        if (this.listMessage.indexOf(item.id) != -1) {
          this.listMessage.splice(this.listMessage.indexOf(item.id), 1);
        } else {
          this.listMessage.push(item.id);
        }
        // console.log(this.listMessage);
      }
    },
    deleteItems(item, e) {
      // console.log(item);
      if (e.target.tagName === "INPUT") {
        if (this.listMessages.indexOf(item.user_id) != -1) {
          this.listMessages.splice(this.listMessages.indexOf(item.user_id), 1);
        } else {
          this.listMessages.push(item.user_id);
        }
        // console.log(this.listMessages);
      }
    },
    async checkoutItem() {
      try {
        await messageDeletes({ id: this.listMessage });
        const res = await messageInfo({
          user_id: this.user_id,
          message_id: this.id,
        });
        this.list = res.comment;
        this.$message.success("删除成功");
      } catch (e) {
        this.$message.error(e.message);
      }
    },
    async checkoutItems() {
      try {
        await messageDelete({ id: this.listMessages });
        this.getDeta();
        this.$message.success("删除成功");
      } catch (e) {
        this.$message.error(e.message);
      }
    },
  },
};
</script>

<style  lang="less">
.a_download {
  background: #f2f4f9;
  width: 50%;
  padding: 15px;
  border-radius: 5px;
  margin-top: 20px;
  .iconfont {
    font-size: 25px;
  }
  .icon-wenjian {
    color: #3377ff;
  }
  span {
    margin-left: 10px;
  }
}
.details_head {
  border-bottom: 1px solid #d6d6d6;
  padding-bottom: 20px;
  .time {
    color: #9a9a9a;
    margin-top: 20px;
  }
}
.details_info {
  p {
    margin: 20px 0;
  }
}
.centerDetail_box {
  width: 800px;
  .contextSize {
    color: #9a9a9a;
    margin-top: 20px;
  }
  .tagmr {
    margin-top: 30px;
  }
}

.martop {
  border-top: 1px solid #d6d6d6;
  border-bottom: 1px solid #d6d6d6;
  margin-top: 20px;
  padding: 27px 0;
  width: 800px;
}

.info_item p {
  margin-bottom: 20px;
  line-height: 1.5;
}

.head_avatar {
  display: block;
  width: 53px;
  height: 53px;
  border-radius: 5px;
}
.head_time {
  padding: 0 17px;
  margin: 5px 0;
  font-size: 14px;
  color: #9a9a9a;
}
.head_name {
  margin-left: 17px;
}
.head_meta {
  font-size: 14px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.admin_details {
  .head-chat {
    padding: 0px 90px;
    min-height: inherit;
    margin-bottom: 0px;
    .content {
      top: -10px;
      // left:20px;
    }
  }

  .el-collapse {
    border: none;
  }
  .el-collapse-item__header {
    border: none;
    height: 53px;
    line-height: 53px;
    padding: 50px 0;
    border-top: 1px solid #d6d6d6;
    // background-color:#f7f9fc;
    position: relative;
  }
  .el-collapse-item__wrap {
    background-color: #f7f9fc;
    border: none;
  }
  .el-collapse-item__arrow {
    margin: 0 0 0 auto;
  }
  .el-collapse-item {
    margin-bottom: 20px;
  }
  .el-collapse-item__content {
    background-color: #fff;
  }
  .right .content {
    font-size: 14px;
    font-weight: 400;
    color: rgba(86, 165, 255, 1);
    background: rgba(236, 245, 255, 1);
    border: 1px solid rgba(202, 228, 255, 1);
    &::after {
      border-color: rgba(236, 245, 255, 1) transparent transparent;
    }
  }
  .addChat {
    width: 42%;
    position: fixed;
    bottom: 33px;
    left: 37%;
    transform: translateX(-51%);
  }
}
.centerDetail_box_p {
  font-weight: bold;
}
@media (max-width: 1360px) {
}
</style>
